﻿body
{
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background: #CCC;
    margin: 15px 0;
}

header,
footer,
nav_top,
section {
    display: block;
}

/* Styles for Layout 
-----------------------------------------------------------*/
#wrap {
	position: relative;
	width: 1024px;
	margin: 0 auto;
	text-align: left;
    background-color: #fff;
}

#wrap:before {
	position: absolute;
	width: 1024px;
	height: 10px;
	top: 0; left: 0;
	z-index: 2;	
    content: '';
    background-color: #fff;
}

#header {
	width: 98%;
	position: relative;
	height: 100px;
	margin: 10px auto 0 auto;
	color: #FFF;	
    background: url(images/header-bg-small.jpg) repeat ;
    padding: 1px 0;

}
#header h1#logo-text a {
	position: absolute;
	margin: 0; padding: 0;
	font: bold 36px 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -1px;
	color: #AEAAAA;
	text-transform: none;
	text-decoration: none;
	
	/* change the values of top and left to adjust the position of the logo*/
	top: 25px; left: 30px;	
}
#header h1#logo-text span {
	color: #838181;
}

/* header links */
#header #header-links {
	position: absolute;
	top: 20px; right: 20px;	
	color: #838181;
	font-size: 12px;	
}
#header #header-links a {	
	color: #838181;
	text-decoration: none;	
}
#header #header-links a:hover {
	color: #444;		
}

#body {
    width: 98%;
	min-height: 200px;
    height: auto;
	margin: 10px auto 0 auto;
}

/* Navigation top bar */
#nav_top {
	padding: 0;	
    width: 98%;
    margin: 0 auto;
    background-color:aqua;
}

#nav_top::after{
    clear:both;
    content: '';
    display:block;
}

#nav_top ul {
	float: left;
	list-style: none;
	background: url(images/nav.jpg) repeat-x;	
	width: 100%;		
	text-transform: uppercase;
	padding: 0;	
	display: inline;
    margin: 0;
}
#nav_top ul li {
	display: inline;
	margin: 0; padding: 0;
}
#nav_top ul li a {
	display: block;
	float: left;
	width: auto;
	margin: 0;
	padding: 0 14px;
	border-right: 1px solid #899D00;
	border-left: 1px solid #A7D101;
	border-bottom: none;
	color: #FFF;
	font: bold 13px/2.8em "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
	text-transform: uppercase;
	text-decoration: none;	
	letter-spacing: 1px;
}
#nav_top ul li a:hover, 
#nav_top ul li a:active {
	background: url(images/nav-hover.jpg) repeat-x;	
}
#nav_top ul li#current a {	
	background: url(images/nav-current.jpg) repeat-x;	
}

#nav_top ul #sub-menu{
	float:right;
    display: inline-block;
}

#nav_top ul #sub-menu #menu-icon{
	width: 40px;
	height: 40px;
	background: url(images/menu-icon.png) center no-repeat;
}

#nav_top ul #sub-menu #menu-icon:hover {
    background: url(images/nav-hover.jpg) repeat-x;	
}

#nav_top ul #sub-menu ul#display-menu{ 
		display: none;
		position: absolute;
		padding: 20px;
		background: #fff;
		border: 5px solid #444;
		right: 10px;
		top: 140px;
		width: 20%;
		border-radius: 4px 0 4px 4px;
}

#nav_top ul #sub-menu ul#display-menu li.sub-menu-item {
	text-align: center;
	width: 100%;
	padding: 10px 0;
	margin: 0;
    display:block;    
}

#nav_top ul #sub-menu ul#display-menu li.sub-menu-item a{
	display: block;
	float: none;
	width: auto;
	margin: 0;
	padding: 0 14px;
	border: none;
	color: #97be10;
	font: bold 13px/2.8em "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
	text-transform: uppercase;
	text-decoration: none;	
	letter-spacing: 1px;    
}

#nav_top ul #sub-menu ul#display-menu li.sub-menu-item a:hover{	
	color: #fff;  
}

#content-wrap {
	float: right;	
	width: 79%;	 	
	background: #E8E8E8;	
    min-height: 200px;
    padding: 0 0 20px 0;
}

/* Main Column */
#main {
    margin: 0 auto;
    width: 98%;
}
#main h2, #nav h2 {
	margin-top: 10px;
	font: normal 1.6em 'Trebuchet MS', Tahoma, Sans-serif;
	color: #8C9F0D; 
	padding: 5px 0 0 5px; 		
}
/*#main ul li {
	list-style-image: url(bullet.gif);
}*/

/* footer */
#footer-wrap {
	clear: both;
	width: 98%;
	font-size: 95%;	
	text-align: left;
	padding: 5px 0;
    margin: 0 auto;
}
#footer-wrap a {
	text-decoration: none;
	color: #666666;
	font-weight: bold;
}
#footer-wrap a:hover {
	color: #000;	
}
#footer-wrap p {
	padding: 5px 0;
}

/* bottom */
#footer-bottom {
	clear: both;
	color: #666;	
	margin: 0 auto; 
	width: 820px;
	padding: 5px 0;
	text-align: center;
}



/* Styles for basic forms
-----------------------------------------------------------*/

fieldset 
{
    border:1px solid #7f9109;
    padding:0 1.4em 1.4em 1.4em;
    margin:0 0 1.5em 0;
}

legend 
{
    font-size:1.2em;
    font-weight: bold;
}

textarea 
{
    min-height: 75px;
    width: 200px;
    resize: none;
}

.editor-label 
{
    margin: 1em 0 0 0;
}

.editor-field 
{
    margin:0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
    border: red dashed 1px;
    background-color: #FDE;
    margin: 0 0 10px 0;
    padding: 0;	
}

.validation-summary-errors ul
{
    list-style: none;	
    margin: 0 0 0 15px;
	padding: 10px;	
}

.validation-summary-errors ul li {
	float: left; width:48%;
	margin: 0 5px; padding: 0;
}

.validation-summary-errors ::after 
{
    content: ' ';
    display: block;
    clear: both;
}

.validation-summary-valid
{
    display: none;
}

/* Style for form*/
.two-column-container {
    width: 100%;
    min-height: 27px;
    height: auto;
    padding: 10px 0 0 0;
}

.two-column-container:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.texteditor {
  float: left;
  width: 98%;  
  min-height: 27px;
  height: auto;
  text-align:left; 
}

.texteditor label{
  float: left;
  width: 120px;  
  text-align: right; 
  padding-right: 20px;
}

.texteditor input[type=text] {
  width: 200px;
}

.texteditor select {
  width: 200px;
}

texteditor textarea {
    width: 230px;
}

.texteditor span {
    display:block;
    clear: both;
}

.clear {
    clear:both;
}

.texteditor .inline {
    display: inline;
}

/** Table layout*/
.top-menu
{
    margin: 0 auto 5px auto;
    width: 100%;
}

.bottom-menu
{
    margin: 10px auto 0px auto;
    width: 100%;
}

.emptyRow
{
	background: #93BC0C url(images/nav.jpg) repeat-x;
	height: 24px;
	color: #FFF;
	text-align: center;
    margin: 0 auto;
    width: 100%;
    padding: 5px 0 0 0;
}

.tableMain {
    table-layout:fixed;
	border-collapse: collapse;
	margin: 10px 0 0 0;	
    width: 100% !important;
    clear:both;
    display: block;
   

}
.tableMain th strong {
	color: #fff;
}
.tableMain th {
	background: #93BC0C url(images/nav.jpg) repeat-x;
	height: 29px;
	padding-left: 12px;
	padding-right: 12px;
	color: #FFF;
	text-align: left;
	border-left: 1px solid #B6D59A;
	border-bottom: solid 2px #FFF;  
}
.tableMain tr {
	min-height: 30px;
    height:auto;
}
.tableMain td {
	padding-left: 11px;
	padding-right: 11px;
	border-left: 1px solid #E8E8E8;
	border-bottom: 1px solid #DFDFDF;
}
.tableMain td.first,th.first {
	border-left: 0px;
}
.tableMain tr.row-a {
	background: #F8F8F8;
}
.tableMain tr.row-b {
	background: #EFEFEF;		
}

.width_5per {
    width: 5%;
}

.width_10per {
    width: 10%;
}

.width_15per {
    width: 15%;
}

.width_20per {
    width: 20%;
}

.width_25per {
    width: 15%;
}

.width_30per {
    width: 30%;
}

.width_35per {
    width: 30%;
}

.width_40per {
    width: 40%;
    white-space: pre-line;
}

.width_45per {
    width: 40%;
    white-space: pre-line;
}

.width_50per {
    width: 40%;
    white-space: pre-line;
}

.width_55per {
    width: 40%;
    white-space: pre-line;
}

.width_60per {
    width: 40%;
    white-space: pre-line;
}

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid white;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	
	border-top: 5px solid white;
}

/* Button style*/
input[type=submit], input[type=button], button {
    min-width: 75px;
}

hr {
    margin: 20px 0 0 0;
}
.dialog_button_holder {
    padding: 20px 0 0 0;
    text-align: right;
    clear: both;
}

/***** Fix Long word problem *******/
.word_wrap
{
    word-break:break-all;
    word-wrap: break-word;
    display:block;
}

input[type=button].btnLookup
{
    min-width: 15px;    
}

/***** Lookup css *************/
.txtFillCode
{
    width:40px!important;
}

.txtFillName
{
    width:120px!important;
    background-color:#E8E8E8;
}
